<template>
	<div class="home">
		<div class="menus">
			<page-menus ref="page_menus" :menuSpread="menuSpread"></page-menus>
		</div>
		<div class="body">
			<page-nav ref="page_nav" @spread="spread"></page-nav>
			<div class="body-pading">
				<page-tag @refreshTag='refreshTag' @menusWatch="menusWatch"></page-tag>
			</div>
			<div class="body-router">
				<el-scrollbar class="body-router-scrollbar">
					<router-view></router-view>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>
<script setup>
	import pageMenus from './menus/index.vue'
	import pageNav from './nav/index.vue'
	import pageTag from './tag/index.vue'
	import store from '@/common/utils/store'
	import {
		ref
	} from 'vue'
	let menuSpread = ref(false),
		page_menus = ref(null),
		page_nav = ref(null),
		spread = str => {
			menuSpread.value = str
		},
		menusWatch = options => {
			page_menus.value.menuIndex = options.id
			store.breadcrumb = [store.breadcrumb[0],options.name,options.id]
			page_nav.value.refreshTag()
		},
		refreshTag = () => { //标签发生变化
			if(page_nav.value){
				page_nav.value.refreshTag()
			}
		}
</script>
<style lang="scss" scoped>
	.home {
		background: url("../../assets/image/login/bj.jpg") no-repeat;
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;

		.body {
			flex: 1;
			background-color: #eee;

			.body-pading {
				box-sizing: border-box;
				padding: 0 10px;
			}

			.body-router {
				width: 100%;
				height: calc(100% - 100px);
				box-sizing: border-box;
				padding: 0 10px;

				.body-router-scrollbar {
					height: 100%;
					box-sizing: border-box;
					padding: 5px 10px;
					background-color: #ffffff;
				}
			}
		}
	}
</style>
